<!--
 * @name order
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-02
 -->

<template>
  <div class="p-medal common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
      :startTime="gameInfo.startTime"
      :eventName="gameInfo.eventName"
    ></page-title>
    <div class="content">
      <div
        class="gold"
        :style="isTeam ? 'width: 60%;font-size: 8rem !important;' : 'font-size: 4.8rem !important;'"
      >
        <span :style="isTeam ? 'margin-left: 8rem;' : ''">
          <img src="@/assets/img/scb/gold.png" height="140px" alt="" />
        </span>
        <div class="info" :style="isTeam ? 'margin-left:2rem' : ''">
          <div
            class="delegation"
            :style="isTeam ? 'width: 80%;font-size: 9rem;' : ''"
          >
            {{ medalData.gold.CountryName }}
          </div>
          <div class="name" v-if="medalData.gold.AthleteName">
            {{ medalData.gold.AthleteName }}
          </div>
          <div
            v-if="medalData.gold.HorseName"
            :class="['horseName', medalData.gold.HorseName.length > 12 ? 'horseNameAdapt' : '']"
          >
            <div>
              {{ medalData.gold.HorseName }}
            </div>
          </div>
        </div>
      </div>
      <div
        class="silver"
        :style="isTeam ? 'width: 60%;font-size: 8rem !important;' : 'font-size: 4.8rem !important;'"
      >
        <span :style="isTeam ? 'margin-left: 8rem;' : ''">
          <img src="@/assets/img/scb/silver.png" height="140px" alt="" />
        </span>
        <div class="info" :style="isTeam ? 'margin-left:2rem' : ''">
          <div class="delegation" :style="isTeam ? 'width: 80%;font-size: 9rem' : ''">
            {{ medalData.silver.CountryName }}
          </div>
          <div class="name" v-if="medalData.silver.AthleteName">
            {{ medalData.silver.AthleteName }}
          </div>
          <div
            v-if="medalData.silver.HorseName"
            :class="['horseName', medalData.silver.HorseName.length > 12 ? 'horseNameAdapt' : '']"
          >
            <div>
              {{ medalData.silver.HorseName }}
            </div>
          </div>
        </div>
      </div>
      <div
        class="copper"
        :style="isTeam ? 'width: 60%;font-size: 8rem !important;' : 'font-size: 4.8rem !important;'"
      >
        <span :style="isTeam ? 'margin-left: 8rem;' : ''">
          <img src="@/assets/img/scb/copper.png" height="140px" alt="" />
        </span>
        <div class="info" :style="isTeam ? 'margin-left:2rem' : ''">
          <div class="delegation" :style="isTeam ? 'width: 80%;font-size: 9rem' : ''">
            {{ medalData.copper.CountryName }}
          </div>
          <div class="name" v-if="medalData.copper.AthleteName">
            {{ medalData.copper.AthleteName }}
          </div>
          <div
            v-if="medalData.copper.HorseName"
            :class="['horseName', medalData.copper.HorseName.length > 12 ? 'horseNameAdapt' : '']"
          >
            <div>
              {{ medalData.copper.HorseName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import { reactive } from 'vue'
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const gameInfo = ref({
  discipline: '马术',
  // match: '场地障碍团体赛',
  match: '场地障碍个人赛',
  event: 'JUMPTEAM',
  type: '奖牌榜',
  startTime: '13:01:29',
  eventName: '',
})

const isTeam = ref(false)

const medalData = reactive({
  gold: {
    delegation: '广东',
    name: '梁锐基',
    horseName: '蓝露娜 LA LUNA',
  },
  silver: {
    delegation: '浙江',
    name: '段义华',
    horseName: '暮蓿 (Mu Xu)',
  },
  copper: {
    delegation: '浙江',
    name: '徐浩',
    horseName: 'Eyes Blue De La Sina',
  },
})

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const params = ref({})
const procName = ref([])

onBeforeMount(() => {})
onMounted(() => {
  // gameInfo.value.match = route.query.MatchDate
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

watchEffect(() => {
  if (results.value?.datasetList) {
    gameInfo.value.event = results.value.datasetList[0][0]?.EventCode
    gameInfo.value.match = results.value.datasetList[0][0]?.EventName
    gameInfo.value.eventName = results.value.datasetList[0][0].EventName
    if (gameInfo.value.eventName.includes('团体')) {
      isTeam.value = true
    } else {
      isTeam.value = false
    }
    medalData.gold = results.value.datasetList[1].find((item) => item.Medal === 'Gold') || {}
    medalData.silver = results.value.datasetList[1].find((item) => item.Medal === 'Sliver') || {}
    medalData.copper = results.value.datasetList[1].find((item) => item.Medal === 'Bronze') || {}
  }
})

watch(
  () => route.query,
  (val) => {
    params.value = val
    getData()
  }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/scb/medal';
</style>
